
	html{
		width:100%;
		height:100%;
		background-color: rgba(40,40,20,1.0);
		margin: 0;
		padding: 0;                
		overflow: hidden;
	}
	body{
		width:100%;
		height:100%;
		overflow: hidden;
		margin: 0;
		padding: 0;                
	}

    .above_main{
		position: relative;
		--border: solid 1px red;
		background-color: rgba(40,40,80,1.0);
        color: white;
		width:100%;
		height:100%;
        left: 0px;
		top: 0px;
		overflow: hidden;
        
		margin: -0px 0px 0px -0px;  /*top, right, bottom, left*/
		padding: 0;                
    }

	.demo1{
		position: relative;
		border: solid 1px blue;
		background-color: rgba(20,20,40,0.9);
        
        width: 97%;
		height:5%;
        left: 1%;
		--top: 10%;
        --bottom: 2px;
        
		--padding-top: 10px;
		opacity: 0.9;
        
        display:flex;
				flex-direction: row; /* row | row-reverse | column | column-reverse */
				flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
				--justify-content: space-around;
				align-items: left;
		overflow: hidden;
	}
    
	.itm1{
		background-color: rgba(200,200,240,1.0);
		border: solid 1px white;
        border-radius: 15%; 
		position: relative;
        height:90%;
        width:5%;
        flex: initial; /* 保持原有属性值 */
        margin-left: 1%;
    }
    
    .demo2{
		position: absolute;
		border: solid 2px green;
        width: 97%;
		height:1px;
        left: 1%;
		--top: 10%;
        bottom: 200px;
		overflow: hidden;
    }
    .demo2s{
		position: relative;
		border: solid 2px blue;
		background-color: rgba(20,20,40,0.9);
        
        width: 100%;
		height:20px;
		opacity: 0.7;
        
        display:flex;
    }
    
	.itm2{
		background-color: rgba(200,200,240,1.0);
		border: solid 1px white;
		position: relative;
        height:30px;
        width:50px;
        flex: initial; /* 保持原有属性值 */
    }
    
    /*摸似阻挡层*/
    .zd1{
		position: absolute;
        width: 99%;
		height:7%;
        left: 4px;
        bottom: 0px;
		background-color: rgba(80,80,120,0.5);
        opacity: 0.09;
    }

	.zb1_panel{
		position: absolute;
		border: solid 1px blue;
		background-color: rgba(20,20,40,0.9);
        
        width: 97%;
		height:5%;
        left: 1%;
		--top: 10%;
        bottom: 4px;
        
		--padding-top: 10px;
		animation:off2on 1s 1;
		opacity: 0.9;
        
        display:flex;
				flex-direction: row; /* row | row-reverse | column | column-reverse */
				flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
				--justify-content: space-around;
				align-items: left;
		overflow: hidden;
	}
    
    .zb1_panel_out{
		position: absolute;
		border: solid 1px blue;
		background-color: rgba(20,20,40,0.9);
        
        width: 97%;
		height:1px;
        left: 1%;
		--top: 10%;
        bottom: 4px;
        
		animation:on2off 1s 1;
		opacity: 0.1;
        
        display:flex;
				flex-direction: row; /* row | row-reverse | column | column-reverse */
				flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
				--justify-content: space-around;
				align-items: left;
		overflow: hidden;
    }

	@keyframes off2on{
	    0%{height:1px;opacity: 0.1;}
	    100%{height:5%;opacity: 0.9;}
	}
	@keyframes on2off{
	    0%{height:5%;opacity: 0.9;}
	    100%{height:1px;opacity: 0.1;}
	}
    
    .zbitm4{
        width:15%;
        min-width: 150px;
        --flex: 2;
     }
     
	.zbitm{
		background-color: rgba(200,200,200,0.5);
		border: solid 1px silver;
        border-radius: 4px; 
		position: relative;
        height:90%;
        width:5%;
        flex: initial; /* 保持原有属性值 */
        margin-left: 1%;
        text-align: center;
        
        color: white;
        cursor: pointer;
        
    }
    
    .zbitm4h{
        width:15%;
        min-width: 150px;
        --flex: 2;
     }